<template>
      <div class="wallet">
          <div class="wallet-header" :style="{backgroundImage: 'url(' + bg + ')' }">
              <div class="wallet-title">奇妙币余额</div>
              <div class="wallet-num">0</div>
          </div>
          <div class="wallet-main">
              <div class="recharge-headline">选择充值的奇妙币数：</div>
              <ul class="wallet-recharge">
                <li class="recharge-list" v-for="( item, index ) in rechargeList" :key="item.id" :class="{active:ind==index}" @click="changeBkg(index)">
                    <div class="recharge-title">奇妙币</div>
                    <div class="recharge-number-wrapper">
                         <div class="recharge-number-left">{{item.rec_huaban}}</div>
                         <div class="recharge-number-right">
                            ￥{{item.rec_price}}
                         </div>
                    </div>
                </li>
                <li class="recharge-list list-last" :class="{active:ind==5}" @click="changeBkg(5)">
                  <div class="recharge-number-self-wrapper">
                    <div class="recharge-number-self-left">
                      <input type="text"  v-model="a" @input="change(a)"  maxlength="5" placeholder="请输入充值金额" class="recharge-number-self-left-input"/>
                      <span v-if="this.a==''">
                         ￥ ？
                      </span>
                      <span v-else>
                        ￥{{a}}
                      </span>
                    </div>
                  </div>
                  <div class="recharge-title-self">自定义充值奇妙币数量</div>
                </li>
              </ul>
              <div class="recharge-rule">充值规则：充值不能退款</div>
          </div>
          <div class="pay">
            <button id="pay">立即支付</button>
          </div>
      </div>
</template>

<script>
    import Bg from '@/assets/img/bg.png'
    export default {
        name: "Wallet",
        data: function() {
           return {
             bg:Bg,
             a: "",
             ind:'',
             rechargeList: [
               {
                 rec_id: "0",
                 rec_huaban:'10',
                 rec_price:'10'
               },
               {
                 rec_id: "1",
                 rec_huaban:'100',
                 rec_price:'20'
               },
               {
                 rec_id: "2",
                 rec_huaban:'300',
                 rec_price:'50'
               },
               {
                 rec_id: "3",
                 rec_huaban:'500',
                 rec_price:'500'
               }
             ]
           }
        },
      methods: {
        change(val) {
          val = val.replace(/(^\s*)|(\s*$)/g, "")
          if(!val) {
            this.a = "";
            return
          }

          // 输入框只能输入数字而且开头不能为零
          val=val.replace(/^[0]+[0-9]*$/gi,"")
          var reg = /[^\d.]/g



          // 只能是数字和小数点，不能是其他输入
          val = val.replace(reg, "")
          //
          // // 保证第一位只能是数字，不能是点
          // val = val.replace(/^\./g, "");
          // // 小数只能出现1位
          // val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
          // // 小数点后面保留2位
          // val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');

          this.a = val;
        },
        changeBkg:function (index) {
          this.ind=index;
        }
      },
      beforeRouteEnter(to ,from,next){
        window.document.body.style.backgroundColor = '#fff';
        next();
      },
      beforeRouteLeave(to ,from,next){
        window.document.body.style.backgroundColor = '#f2f2f2';
        next();
      }
    }
</script>

<style scoped lang="stylus">
    @import '~style/mixins.styl'
    @import '~style/varibles.styl'
    .wallet
       padding .2rem
       .wallet-header
          border-radius .1rem
          background-repeat no-repeat
          -moz-background-size 100% 100%
          background-size 100% 100%
          .wallet-title
             font-size .26rem
             color $DefaultTextColor
             padding .3rem
          .wallet-num
             padding .1rem 0 .5rem .3rem
             font-size .9rem
             color $DefaultTextColor
       .wallet-main
          margin-top .3rem
          padding .2rem 0
          width 100%
          border-radius .1rem
          .recharge-headline
             font-size .3rem
             color #333
             font-weight 600
          .wallet-recharge
             between-align-items()
             flex-wrap wrap
             .recharge-list
                margin-top .3rem
                width calc(33.3% - .1rem)
                background-color #F5F3FC
                color  $DefaultColor
                border-radius .1rem
                .recharge-title
                   padding .2rem
                   color #CED1EF
                   font-size .2rem
                .recharge-number-wrapper
                   padding .2rem
                   between-align-items()
                   .recharge-number-left
                      left()
                      font-size .4rem
                      color #CED1EF
                   .recharge-number-right
                      right()
                      color $DefaultWalletColor
                      font-size .3rem
                .recharge-title-self
                   padding .2rem
                   color $DefaultWalletColor
                   font-size .2rem
                .recharge-number-self-wrapper
                   padding .2rem
                   between-align-items()
                  .recharge-number-self-left
                     left()
                     font-size .3rem
                     color $DefaultWalletColor
                     .recharge-number-self-left-input
                        width 2rem
                        font-size .25rem
                        background transparent
                     /*.recharge-number-self-left-input:-moz-placeholder*/
                     /*   font-size: .15rem*/
                     /*   color #999*/
                     /*.recharge-number-self-left-input:-ms-input-placeholder*/
                     /*   font-size: .15rem*/
                     /*   color #999*/
                     /*.recharge-number-self-left-input::-webkit-input-placeholder*/
                     /*   font-size: .15rem*/
                     /*   color #999*/
                  .recharge-number-self-right
                     right()
                     color $DefaultWalletColor
                     font-size .3rem
             .list-last
               width calc(66.6% - .1rem)
               .recharge-title-self
                 center()
               .recharge-number-self-wrapper
                 padding .1rem
                 .recharge-number-self-left
                   center-align-items()
                   .recharge-number-self-left-input
                     font-size .4rem
                   .recharge-number-self-left-input:-moz-placeholder
                     font-size: .15rem
                     color $DefaultWalletColor
                   .recharge-number-self-left-input:-ms-input-placeholder
                     font-size: .15rem
                     color $DefaultWalletColor
                   .recharge-number-self-left-input::-webkit-input-placeholder
                     font-size: .15rem
                     color $DefaultWalletColor
             .active
                background $DefaultWalletColor
                .recharge-title
                  color $DefaultTextColor
                .recharge-number-wrapper
                   .recharge-number-left
                      color $DefaultTextColor
                   .recharge-number-right
                      color $DefaultTextColor
                .recharge-title-self
                   color $DefaultTextColor
                .recharge-number-self-wrapper
                   .recharge-number-self-left
                      color $DefaultTextColor
                      .recharge-number-self-left-input:-moz-placeholder
                        color: $DefaultTextColor
                      .recharge-number-self-left-input:-ms-input-placeholder
                         color: $DefaultTextColor
                      .recharge-number-self-left-input::-webkit-input-placeholder
                       color: $DefaultTextColor
                   /*.recharge-number-self-right*/
                   /*    color #fff*/
          .recharge-rule
             font-size .2rem
             color #999
             padding-top .2rem
       .pay
          width calc(100% - .4rem)
          position fixed
          bottom .55rem
          left 0
          right 0
          center()
          #pay
             border-radius .1rem
             width calc(100% - .55rem)
             height .98rem
             font-weight bold
             center-align-items()
             color $DefaultTextColor
             font-size .3rem
             background $DefaultColor
</style>
<style scoped>
</style>
